<template>
  <div v-if="needToolbar || needPagination" class="flex-content">
    <div class="left-content">
      <vxe-toolbar v-if="needToolbar" class-name="custom-tools">
        <template #tools>
          <!--列设置-->
          <i class="icpIconfont liebiaoxianshi" @click="showDraw"></i>
          <!--刷新-->
          <i class="icpIconfont liebiaoshuaxin" @click="pageChange(paginationConfig)"></i>
          <!--全屏-->
          <i v-if="!fullFlag" class="icpIconfont liebiaoquanping" @click="toggleFullScreen"></i>
          <!--退出全屏-->
          <i v-else class="icpIconfont liebiaohuanyuan" @click="toggleFullScreen"></i>
        </template>
      </vxe-toolbar>
    </div>
    <div class="right-content">
      <vxe-pager
        v-if="needPagination"
        v-model:current-page="paginationConfig.currentPage"
        v-model:page-size="paginationConfig.pageSize"
        :pager-count="7"
        :border="true"
        :total="paginationConfig.total"
        :layouts="['PrevPage', 'Number', 'NextPage']"
        @page-change="pageChange"
      >
        <template #left>
          <TnPopover @change="popoverChange">
            <template #content>
              <div class="page-size-content">
                <span>每页条数</span>
                <vxe-radio-group v-model="paginationConfig.pageSize" @change="pageSizeChange">
                  <vxe-radio-button
                    v-for="item in paginationConfig.pageSizes"
                    :key="item"
                    :label="item"
                    :content="item"
                  ></vxe-radio-button>
                </vxe-radio-group>
              </div>
              <div class="jump-content">
                <span>跳转至</span>
                <div>
                  <vxe-input v-model="currentPage" style="width: 96px"></vxe-input>
                  <vxe-button
                    status="primary"
                    size="medium"
                    :disabled="!(currentPage && currentPage > 0)"
                    @click="currentPageChange"
                  >
                    <i class="icpIconfont qianwang"></i>
                  </vxe-button>
                </div>
              </div>
            </template>
            <span class="pointer">
              {{ paginationConfig.pageSize }}条/页
              <vxe-icon v-if="pageSizeVisible" name="caret-up"></vxe-icon>
              <vxe-icon v-else name="caret-down"></vxe-icon>
            </span>
          </TnPopover>
          <span class="page-total">共{{ paginationConfig.total }}条</span>
        </template>
        <template #right>
          <span class="page-total">共{{ Math.ceil(paginationConfig.total / paginationConfig.pageSize) }}页</span>
        </template>
      </vxe-pager>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, toRefs } from 'vue'
import { toggleFullScreen } from '../../config'
import { useEventListener } from '@vueuse/core'
import TnPopover from '../TnPopover/index.vue'
import { IPage } from '../../type'

const emits = defineEmits(['pageChange', 'showConfig', 'fullFlagChange'])

const props = defineProps<{
  paginationConfig: IPage
  needPagination: boolean
  needToolbar: boolean
  tableName: string | undefined
}>()
const { paginationConfig, needPagination, needToolbar } = toRefs(props)

// 分页组件事件抛出
const pageChange = (data) => {
  emits('pageChange', data)
}

// 修改每页显示数量
const pageSizeChange = () => {
  paginationConfig.value.currentPage = 1
  pageChange(paginationConfig.value)
}

// 跳转到指定页
const currentPage = ref()
const currentPageChange = () => {
  paginationConfig.value.currentPage = Number(currentPage.value)
  pageChange(paginationConfig.value)
}

// 监听全屏切换事件
const fullFlag = ref(false)
useEventListener(document, 'fullscreenchange', () => {
  fullFlag.value = document.fullscreenElement !== null ? true : false
  emits('fullFlagChange', fullFlag.value)
})

// 分页数量变动
const pageSizeVisible = ref(false)
const popoverChange = (flag) => {
  pageSizeVisible.value = flag
}

// 弹出列设置
const showDraw = () => {
  emits('showConfig')
}
</script>
<style lang="less" scoped>
.flex-content {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  padding: 0 12px;
  border-top: 1px solid #ededed;

  .left-content {
    .icpIconfont {
      font-size: 20px;
      cursor: pointer;
    }

    .custom-tools {
      :deep(.vxe-tools--wrapper) {
        gap: 12px;
      }
    }
  }

  .page-total {
    margin-left: 10px;
  }
}
.pointer {
  cursor: pointer;
}
.page-size-content {
  span {
    display: inline-block;
    width: 57px;
    margin-right: 8px;
  }
  :deep(.vxe-radio-group) {
    background-color: #f5f5f5;
    padding: 2px;
    border-radius: var(--vxe-border-radius);
    .vxe-radio-button > input:checked + .vxe-radio--label {
      line-height: calc(var(--vxe-button-height-default) - 6px);
      background-color: #fff;
      color: #444;
      border: 0;
    }
    .vxe-radio-button > input:checked + .vxe-radio--label:checked {
      box-shadow: none;
    }
    .vxe-radio-button .vxe-radio--label {
      background-color: transparent;
      border: 0;
      color: #96989b;
      padding: 0 8.5px;
    }
    .vxe-radio-button .vxe-radio--label:hover {
      color: #444;
    }
    .vxe-radio-button .vxe-radio--label:active {
      box-shadow: none;
    }
  }
}

.jump-content {
  display: flex;
  line-height: 32px;
  margin-top: 16px;
  --vxe-primary-color: #1472ff;
  span {
    display: inline-block;
    width: 57px;
    margin-right: 8px;
  }
  :deep(.vxe-button.type--button:not(.is--circle)) {
    padding: 0 7px;
  }
  :deep(.vxe-input + .vxe-button.type--button) {
    margin-left: 8px;
  }
}
</style>
